<template>

    <div id="container" style="width:100%;height:100%"></div>


</template>
<script>

    export default {
      data() {
          return {
              map:""
          };
      },
      methods: {
        initMap:function(){
            var self = this;
            self.map = new BMap.Map("container");    // 创建Map实例
            self.map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            self.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            let point = new BMap.Point(116.331398,39.897445);
            self.map.centerAndZoom(point,12);
            let  myCity = new BMap.LocalCity();
            myCity.get(function(result){
                let cityName = result.name;
                self.map.setCenter(cityName);

            })
          },
          renderHot:function(points){
                if(!this.isSupportCanvas){
                    alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
                }
                 this.heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":10});
                 this.map.addOverlay(this.heatmapOverlay);
                 this.heatmapOverlay.setDataSet({data:points,max:2});
                 this.setGradient(this.heatmapOverlay);
                  this.heatmapOverlay.show();

          },

          isSupportCanvas:function(){
              let elem = document.createElement('canvas');
              return !!(elem.getContext && elem.getContext('2d'));
          },
          setGradient(){
              let gradient = {
                      0:'rgb(102, 255, 0)',
                      .5:'rgb(255, 170, 0)',
                      1:'rgb(255, 0, 0)'
                  };
              let colors = document.querySelectorAll("input[type='color']");
              colors = [].slice.call(colors,0);
              colors.forEach(function(ele){
                  gradient[ele.getAttribute("data-key")] = ele.value;
              });
              this.heatmapOverlay.setOptions({"gradient":gradient});
          },
          loadPoint(){
              let self = this;
              let data = {
                  state : 2,
                  day : 7
              };
              let info = document.querySelector("#container");

              self.$req.pget(self.$api("Chart")+"k_chart",self,function(res){
                 let points = res.data.data;
                  self.reciverPoint=[];
                  self.sendPoint=[];
                 for(var i in points ){
                     let point = points[i];
                     self.reciverPoint.push({"lng":point.receiverLng,"lat":point.receiverLat,"count":1});
                     self.sendPoint.push({"lng":point.consignerLng,"lat":point.consignerLat,"count":1});
                 }
                  var all = self.reciverPoint.concat(self.sendPoint);

                  self.renderHot(all);
              },data,false,info)
          }
      },
      mounted:function(){
        this.loadPoint();
        this.initMap();

      }
  }
</script>





